#include("../../comm/ListHead.html")
<script language="JavaScript" src="../../static/js/jscharts.js?v=122"></script>
<style>
    .layui-table[lay-skin="line"]{ border:none }
    .layui-table[lay-skin="line"] th, .layui-table[lay-skin="line"] td{ border-bottom:1px #eee solid; }
</style>
<div class="layui-fluid layui-anim layui-anim-scale">
    <div class="layui-fluid layui-anim layui-anim-scale">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card" style="min-height:250px;text-align:center">
                    <div id="chart_container"></div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card" style="min-height:250px">
                    <div class="layui-card-header">
                        <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e1" title="刷新"></i></p>
                        CPU
                    </div>
                    <div id="cpuHtml" class="layui-card-body">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card" style="min-height:250px">
                    <div class="layui-card-header">
                        <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e2" title="刷新"></i></p>
                        内存
                    </div>
                    <div id="memoryHtml" class="layui-card-body">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e3" title="刷新"></i></p>
                        服务器信息
                    </div>
                    <div id="servHtml" class="layui-card-body">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e4"></i>
                        </p>
                        磁盘状态
                    </div>
                    <div id="diskHtml" class="layui-card-body">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script id="servTpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <tbody>
        <tr>
            <td>服务器名称</td>
            <td>{{ d.sys_host_name }}</td>
            <td>操作系统</td>
            <td>{{ d.sys_os_name }}</td>
        </tr>
        <tr>
            <td>服务器IP</td>
            <td>{{ d.sys_host_ip }}</td>
            <td>系统架构</td>
            <td>{{ d.sys_os_arch }}</td>
        </tr>
        <tr>
            <td>Java Version</td>
            <td>{{ d.sys_java_version }}</td>
            <td>Java Home</td>
            <td>{{ d.sys_java_home }}</td>
        </tr>
        </tbody>
    </table>
</script>
<script id="cpuTpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th>属性</th>
            <th>值</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>核心数</td>
            <td>{{d.cpu_count}}</td>
        </tr>
        <tr>
            <td>用户使用率</td>
            <td>{{d.cpu_user_rate}}</td>
        </tr>
        <tr>
            <td>系统使用率</td>
            <td>{{d.cpu_sys_rate}}</td>
        </tr>
        <tr>
            <td>当前空闲率</td>
            <td>{{d.cpu_sys_idle}}</td>
        </tr>
        </tbody>
    </table>
</script>
<script id="memoryTpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th>属性</th>
            <th>内存</th>
            <th>JVM</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>总内存</td>
            <td>{{ d.sys_memory_total }}</td>
            <td>{{ d.jvm_memory_max }}</td>
        </tr>
        <tr>
            <td>已用内存</td>
            <td>{{ d.sys_memory_used }}</td>
            <td>{{ d.jvm_memory_used }}</td>
        </tr>
        <tr>
            <td>剩余内存</td>
            <td>{{ d.sys_memory_free }}</td>
            <td>{{ d.jvm_memory_free }}</td>
        </tr>
        <tr>
            <td>使用率</td>
            <td>{{ d.sys_memory_rate }}</td>
            <td>{{ d.jvm_memory_rate }}</td>
        </tr>
        </tbody>
    </table>
</script>
<script id="diskTpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th>盘符名</th>
            <th>盘符路径</th>
            <th>文件系统</th>
            <th>盘符类型</th>
            <th>总大小</th>
            <th>可用大小</th>
            <th>已用大小</th>
            <th>已用百分比</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.sys_fs_list, function(index, item){ }}
        <tr>
            <td>{{ item.name }}</td>
            <td>{{ item.mount }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.desc }}</td>
            <td>{{ item.total }}</td>
            <td>{{ item.free }}</td>
            <td>{{ item.used }}</td>
            <td>{{ item.rate }}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<script language="JavaScript">
    var char_cpu_data = [['用户使用率', 1], ['系统使用率	', 1], ['当前空闲率	', 1]];
    layui.use(['laytpl', 'util', 'myTool'], function () {
        var myTool = layui.myTool, util = layui.util, laytpl = layui.laytpl;
        //
        layui.$.get("getCpuInfoApi", {}, function (result) {
            if (result.code == 0) {
                laytpl(cpuTpl.innerHTML).render(result.data, function (html) {
                    document.getElementById('cpuHtml').innerHTML = html;
                    char_cpu_data[0][1] = result.data.cpu_user_rate1;
                    char_cpu_data[1][1] = result.data.cpu_sys_rate1;
                    char_cpu_data[2][1] = result.data.cpu_sys_idle1;
                    CpuDraw();
                });
            }
        });
        layui.$.get("getMemoryInfoApi", {}, function (result) {
            if (result.code == 0) {
                laytpl(memoryTpl.innerHTML).render(result.data, function (html) {
                    document.getElementById('memoryHtml').innerHTML = html;
                });
            }
        });
        layui.$.get("getServInfoApi", {}, function (result) {
            if (result.code == 0) {
                laytpl(servTpl.innerHTML).render(result.data, function (html) {
                    document.getElementById('servHtml').innerHTML = html;
                });
            }
        });
        layui.$.get("getDiskInfoApi", {}, function (result) {
            if (result.code == 0) {
                laytpl(diskTpl.innerHTML).render(result.data, function (html) {
                    document.getElementById('diskHtml').innerHTML = html;
                    draw();
                });
            }
        });
        //
        util.event('lay-active', {
            e1: function (othis) {
                layui.layer.load();
                layui.$.get("getCpuInfoApi", {}, function (result) {
                    layui.layer.closeAll();
                    if (result.code == 0) {
                        laytpl(cpuTpl.innerHTML).render(result.data, function (html) {
                            document.getElementById('cpuHtml').innerHTML = html;
                            char_cpu_data[0][1] = result.data.cpu_user_rate1;
                            char_cpu_data[1][1] = result.data.cpu_sys_rate1;
                            char_cpu_data[2][1] = result.data.cpu_sys_idle1;
                            CpuDraw();
                        });
                    }
                });
            }
            , e2: function (othis) {
                layui.layer.load();
                layui.$.get("getMemoryInfoApi", {}, function (result) {
                    layui.layer.closeAll();
                    if (result.code == 0) {
                        laytpl(memoryTpl.innerHTML).render(result.data, function (html) {
                            document.getElementById('memoryHtml').innerHTML = html;
                        });
                    }
                });
            }
            , e3: function (othis) {
                layui.layer.load();
                layui.$.get("getServInfoApi", {}, function (result) {
                    layui.layer.closeAll();
                    if (result.code == 0) {
                        laytpl(servTpl.innerHTML).render(result.data, function (html) {
                            document.getElementById('servHtml').innerHTML = html;
                        });
                    }
                });
            }
            , e4: function (othis) {
                layui.layer.load();
                layui.$.get("getDiskInfoApi", {}, function (result) {
                    layui.layer.closeAll();
                    if (result.code == 0) {
                        laytpl(diskTpl.innerHTML).render(result.data, function (html) {
                            document.getElementById('diskHtml').innerHTML = html;
                        });
                    }
                });
            }
        });
    });

    function CpuDraw() {
        var myChart = new JSChart('chart_container', 'pie', '');
        myChart.setTitle("CPU使用率");
        myChart.setDataArray(char_cpu_data);
        myChart.colorize(['#44A622', '#A7B629', '#D95531']);
        myChart.setSize(400, 250);
        myChart.setBarSpacingRatio(45);
        myChart.setBarOpacity(1);
        myChart.setBarBorderWidth(0);
        myChart.setTitleFontSize(10);
        myChart.setTitleColor('#607985');
        myChart.setAxisValuesColor('#607985');
        myChart.setAxisNameX('');
        myChart.setAxisNameY('');
        myChart.setGridOpacity(0.8);
        myChart.draw();
    }
</script>